<script setup lang="ts">
import { computed, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { showConfirmDialog, showFailToast } from "vant";
import { timeOptions, flagOptions } from "@/constants";
import useConsultStore from "@/pinia/modules/consultStore.ts";
import type { ConsultIllness } from "@/types/consultTypes";
import type { UploaderFileListItem } from "vant";
import type { UploaderAfterRead } from "vant/lib/uploader/types";
import type { Router } from "vue-router";

const consultStore = useConsultStore();

const router: Router = useRouter();

/*已上传的文件列表*/
const fileList = ref<UploaderFileListItem[]>([]);

/*病情描述信息*/
const illnessInfo = reactive<ConsultIllness>({
    illnessDesc: "", // 症状描述
    illnessTime: undefined, // 患病时间
    consultFlag: undefined, // 是否就诊过
    pictures: [], // 病例信息图片集合
});


/*是否禁用下一步按钮*/
const disabled = computed(() => !illnessInfo.illnessDesc || !illnessInfo.illnessTime||!illnessInfo.consultFlag);


/*文件读取完成后的回调函数*/
const afterRead: UploaderAfterRead = async (params: UploaderFileListItem | UploaderFileListItem[]) => {
    if (Array.isArray(params)) return;
    if (!params.file) return;
    const formData = new FormData();
    formData.append("file", params.file);
    params.status = "uploading";
    params.message = "上传中···";
    try {
        const result = await consultStore.upload(formData);
        params.status = "done";
        params.message = "上传成功";
        params.url = result.url;
        illnessInfo.pictures?.push(result);
    } catch (error: any) {
        params.status = "failed";
        params.message = "上传失败";
        showFailToast(error.message);
    }
};

/*删除文件预览时触发的回调函数*/
const deleteUpload = (params: UploaderFileListItem) => {
    illnessInfo.pictures = illnessInfo.pictures!.filter(item => item.url !== params.url);
};


/*恢复病情的回调函数*/
const resetFormData = async () => {
    if (!consultStore.consultInfo.illnessDesc) return;
    const confirm = await showConfirmDialog({ title: "温馨提示", message: "是否恢复之前填写的病情数据?", closeOnPopstate: false }).catch(error => error);
    if (confirm === "cancel") return;
    const { illnessDesc, illnessTime, consultFlag, pictures } = consultStore.consultInfo;
    Object.assign(illnessInfo, { illnessDesc, illnessTime, consultFlag, pictures });
    fileList.value = pictures as UploaderFileListItem[];
};

/*点击下一步的回调函数*/
const next = () => {
    /*第四步：记录患者的病情描述*/
    consultStore.setIllnessInfo(illnessInfo);
    /*携带参数跳转到家庭档案(患者列表)页面*/
    router.push({ path: "/patient", query: { selectPatient: "true" } });
};

onMounted(() => {
    resetFormData();
});
</script>

<template>
    <div class="illness-info">
        <nav-bar title="图文问诊" left-arrow left-text="返回" @click-left="$router.back()"></nav-bar>
        <div class="illness-tip van-hairline--bottom">
            <img class="img" src="@/assets/images/avatar-doctor.svg" />
            <div class="info">
                <p class="tit">在线医生</p>
                <p class="tip">请描述你的疾病或症状、是否用药、就诊经历，需要我提供什么样的帮助?</p>
                <p class="safe">
                    <svg-icon svg-name="safe"></svg-icon>
                    <span>内容仅医生可见</span>
                </p>
            </div>
        </div>
        <div class="illness-form">
            <div class="item">
                <p>请输入您的病情描述?</p>
                <van-field type="textarea" rows="3" placeholder="请详细描述您的病情，病情描述不能为空" v-model="illnessInfo.illnessDesc"></van-field>
            </div>
            <div class="item">
                <p>本次患病多久了?</p>
                <radio :options="timeOptions" v-model="illnessInfo.illnessTime"></radio>
            </div>
            <div class="item">
                <p>此次病情是否去医院就诊过?</p>
                <radio :options="flagOptions" v-model="illnessInfo.consultFlag"></radio>
            </div>
            <div class="item">
                <p>上传病例图片集合?内容仅医生可见</p>
                <van-uploader v-model="fileList" :max-count="6" :max-size="500 * 1024" multiple :after-read="afterRead" @delete="deleteUpload"></van-uploader>
            </div>
        </div>
        <div class="button">
            <van-button :disabled="disabled" block round type="primary" @click="next">下一步</van-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.illness-info {
    height: 100%;
    position: relative;

    .illness-tip {
        display: flex;
        padding: 15px;

        .img {
            width: 52px;
            height: 52px;
            border-radius: 4px;
            overflow: hidden;
            margin-top: 20px;
        }

        .info {
            flex: 1;
            padding-left: 12px;

            .tit {
                font-size: 16px;
                margin-bottom: 5px;
            }

            .tip {
                padding: 12px;
                background: var(--cp-bg);
                color: var(--cp-text3);
                font-size: 13px;
                margin-bottom: 10px;
            }

            .safe {
                font-size: 10px;
                color: var(--cp-text3);
                display: flex;
                align-items: center;

                .cp-icon {
                    font-size: 12px;
                    margin-right: 2px;
                }
            }
        }
    }

    .illness-form {
        padding: 15px;

        .van-field {
            padding: 0;

            &::after {
                border-bottom: none;
            }
        }

        .item {
            margin-bottom: 10px;

            > p {
                color: var(--cp-text3);
                padding: 15px 0;
            }
        }
    }


}
</style>
